<template>
<div>
	<div class="bang">
			
	</div>
    <div class="m-header" style="background-image:url('assets/logo.jpg')">
    	<div class="s-w">
    		设置
    	</div>
    	<li>{{tit}}</li>
    	<div class="tu"></div>
    	<span>11</span>
    	<p>11111</p>
    </div>   
    <div class="fans">
    	<div>
    		<p>123</p>
    		<span>关注</span>
    	</div>
    	<div>
    		<p>1234</p>
    		<span>粉丝</span>
    	</div>
    </div>
    <div class="m-list">
    	<ul>
    		<router-link to="/hui" tag="li">
    			<i class="iconfont icon-huiyuan"></i>
    			<span>会员中心</span>
    		</router-link>   		
    	</ul>
    	<ul>
    		<router-link to="/xiang" tag="li">
    			<i class="iconfont icon-album"></i>
    			<span>制作相册</span>
    		</router-link>
    		<router-link to="/shou" tag="li">
    			<i class="iconfont icon-shoucang"></i>
    			<span>我的收藏</span>
    		</router-link>
    	</ul>
    	<ul>
    		<router-link to="/gou" tag="li">
    			<i class="iconfont icon-qicheqianlian--copy"></i>
    			<span>购物车</span>
    		</router-link>
    		<router-link to="/ding" tag="li">
    			<i class="iconfont icon-icon-"></i>
    			<span>我的订单</span>
    		</router-link>
    		<router-link to="/you" tag="li">
    			<i class="iconfont icon-youhuiquanquanmian"></i>
    			<span>优惠券</span>
    		</router-link>
    	</ul>
    </div>
 </div>
</template>

<script>
export default {
    name:'User',
    data(){
        return{
            tit:'我 的'
        }
    },
    mounted() {
        this.$emit('toparent',this.tit)
    },
}
</script>

<style>
.bang{
background: blanchedalmond;
width:100%;
height: 3.67rem;
}
	
.m-header{
position: relative;
width: 100%;
height: 19rem;
line-height: 1.67rem;
background-color: rgba(232, 231, 231, 1);
text-align: center;
font-size: 1.4rem;
font-family: Arial;
border-radius:0 0 50% 50%;
padding-bottom: 2rem;
box-sizing: border-box;
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
}
.m-header li{	
width: 11.92rem;
height: 3.5rem;
color: rgba(100, 100, 100, 1);
font-size: 1.4rem;
line-height: 3.5rem;
}

.tu{
margin-top:1rem;
width: 7.5rem;
height: 7.5rem;
border-radius:50% ;
background: brown;
}

.m-header span{
width: 11.92rem;
height: 1.67rem;
color: rgba(100, 100, 100, 1);
}

.m-header .s-w{
position: absolute;
left: 25.58rem;
top: 1.3rem;
width: 5.67rem;
height: 1.67rem;
text-align: center;
font-family: Arial;
}





.fans{
margin: 1rem auto;
width: 28.08rem;
height: 7.5rem;
border-radius: 0.67rem;
background-color: rgba(242, 242, 242, 1);
font-family: Arial;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}

.fans div{
	height: 7.5rem;
	width:7.8rem ;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.fans div p{
line-height: 3rem;
font-size: 1rem;
text-align: center;
}

.fans div span{
line-height:3rem;
font-size: 1.4rem;
text-align: center;
}









.m-list{
margin:0 auto;
width: 28.08rem;
padding-top: 1rem;	
}

.m-list ul{
border-bottom: 0.08rem solid #eee;;
}

.m-list li{
width: 28.08rem;
height: 3.5rem;
line-height: 3.5rem;
color: rgba(16, 16, 16, 1);
font-size: 1.4rem;
text-align: center;
font-family: Arial;
display: flex;
align-items: center;
}
.m-list li p{	
width: 1.58rem;
height: 1.58rem;
line-height: 1.67px;
border: 0.08rem solid rgba(187, 187, 187, 1);
border-radius:50% ;
}

.m-list li span{
text-indent:1rem;
color: rgba(100, 100, 100, 1);
}



    
</style>